import * as THREE from './node_modules/three/build/three.module.js'

export function animation() {
    // 其实就是字符串，放在 HTML script 中只是为了好写？
    let meterial = new THREE.ShaderMaterial({
        vertexShader: document.getElementById('vs').textContent.trim(),
        fragmentShader: document.getElementById('fs').textContent.trim()
    })

    let scene = new THREE.Scene();
    // let width = 10;
    // let height = width * window.innerHeight / window.innerWidth;
    // let camera = new THREE.OrthographicCamera(width / 2, -width / 2, height / 2, - height / 2, 1, 10)    // 正交相机
    // fov:视场角：（Field of View）视野范围
    let camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);    // 透视相机
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // let container = document.getElementById("canvas-frame");
    let container = document.getElementById("canvas-frame");
    container.appendChild(renderer.domElement);
    let geometry = new THREE.BoxGeometry(1, 1, 1)
    // let material = new THREE.ShaderMaterial

    let cube = new THREE.Mesh(geometry, meterial)
    scene.add(cube)
    camera.position.z = 5;
    let animate = function () {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        renderer.render(scene, camera)
    }
    animate();

}
